<!DOCTYPE html>
<html>
<head>
    <title>Capacitor Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="capacitorCanvas" width="400" height="450"></canvas>
    <script>
        const canvas = document.getElementById('capacitorCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.font = '20px sans-serif';

        // Helper function to draw an arrow
        function drawArrow(x1, y1, x2, y2) {
            const headlen = 8;
            const dx = x2 - x1;
            const dy = y2 - y1;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Main Drawing ---

        const cx = 200;

        // 1. Top view: Circle with radius 'a'
        const circle_y = 100;
        const radius = 70;
        ctx.beginPath();
        ctx.arc(cx, circle_y, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Center dot
        ctx.beginPath();
        ctx.arc(cx, circle_y, 2.5, 0, 2 * Math.PI);
        ctx.fill();

        // Radius line
        const angle_a = -Math.PI / 8;
        const x_a_end = cx + radius * Math.cos(angle_a);
        const y_a_end = circle_y + radius * Math.sin(angle_a);
        ctx.beginPath();
        ctx.moveTo(cx, circle_y);
        ctx.lineTo(x_a_end, y_a_end);
        ctx.stroke();

        // Label 'a'
        ctx.save();
        ctx.font = 'italic 20px serif';
        ctx.fillText('a', cx + 40, circle_y - 15);
        ctx.restore();

        // 2. Side view: Capacitor
        const plate_y_top = 250;
        const plate_y_bottom = 300;
        const plate_width = 180;
        const plate_x_start = cx - plate_width / 2;
        const plate_x_end = cx + plate_width / 2;

        // Plates
        ctx.beginPath();
        ctx.moveTo(plate_x_start, plate_y_top);
        ctx.lineTo(plate_x_end, plate_y_top);
        ctx.moveTo(plate_x_start, plate_y_bottom);
        ctx.lineTo(plate_x_end, plate_y_bottom);
        ctx.stroke();

        // 3. Annotations and Vectors
        // Distance 'd'
        const d_x = plate_x_start - 30;
        drawArrow(d_x, plate_y_bottom, d_x, plate_y_top);
        ctx.save();
        ctx.font = 'italic 20px serif';
        ctx.fillText('d', d_x - 15, (plate_y_top + plate_y_bottom) / 2 + 5);
        ctx.restore();

        // z-axis
        const z_x = plate_x_end + 40;
        drawArrow(z_x, plate_y_bottom + 30, z_x, plate_y_top - 30);
        ctx.save();
        ctx.font = 'italic bold 20px serif';
        ctx.fillText('z', z_x - 15, plate_y_top - 35);
        ctx.restore();

        // --- Symbols between plates ---
        const symbol_x_labels = cx - 25;
        const symbol_x_line = cx + 5;
        const symbol_x_vectors = cx + 30;
        
        // Labels (I) and (II)
        ctx.textAlign = 'center';
        ctx.fillText('(II)', symbol_x_labels, plate_y_top + 22);
        ctx.fillText('(I)', symbol_x_labels, plate_y_bottom - 12);

        // Vertical line with stubs (stylized representation)
        // Downward stub from bottom plate
        const down_stub_x = cx - 45;
        ctx.beginPath();
        ctx.moveTo(down_stub_x, plate_y_bottom);
        ctx.lineTo(down_stub_x, plate_y_bottom + 20);
        ctx.stroke();

        // Vertical divider line with upward stub
        ctx.beginPath();
        ctx.moveTo(symbol_x_line, plate_y_top);
        ctx.lineTo(symbol_x_line, plate_y_bottom);
        ctx.moveTo(symbol_x_line, plate_y_top);
        ctx.lineTo(symbol_x_line, plate_y_top - 15);
        ctx.stroke();
        
        // Vectors n and E
        // Vector n (up from top plate)
        drawArrow(symbol_x_vectors, plate_y_top, symbol_x_vectors, plate_y_top - 20);
        ctx.save();
        ctx.textAlign = 'left';
        ctx.font = 'italic 20px serif';
        ctx.fillText('n', symbol_x_vectors + 5, plate_y_top - 5);
        ctx.restore();

        // Vector E (downward between plates)
        drawArrow(symbol_x_vectors, plate_y_top + 20, symbol_x_vectors, plate_y_bottom - 5);
        ctx.save();
        ctx.textAlign = 'left';
        ctx.font = 'italic bold 20px serif';
        ctx.fillText('E', symbol_x_vectors + 5, (plate_y_top + plate_y_bottom) / 2 + 5);
        ctx.restore();


        // 4. Caption
        ctx.textAlign = 'center';
        ctx.font = '20px sans-serif';
        ctx.fillText('Fig. 2.10', cx, plate_y_bottom + 70);

    </script>
</body>
</html>